<template>
  <div>
    <!-- tab组件 -->
    <order-tabs
    :arr="arr"
    />
    <!-- 路由入口 -->
    <router-view v-slot="{ Component }">
    <keep-alive>
      <component
        :is="Component"
        :key="$route.name"
        v-if="$route.meta.keepAlive"
      />
    </keep-alive>
    <component
      :is="Component"
      :key="$route.name"
      v-if="!$route.meta.keepAlive"
    /> 
  </router-view> 

    <!-- footer组件 -->
    <Footer></Footer>
  </div>
</template>

<script setup>
import OrderTabs from "@/components/order/Tab.vue";
import Footer from '../../components/home/footer/Footer.vue'
import {ref} from 'vue'
import{useRoute} from 'vue-router'
const route =useRoute()
const arr=ref([
  {title:'全部',name:'a',path:'/order/all'},
  {title:'已取消',name:'b',path:'/order/not'},
  {title:'已完成',name:'c',path:'/order/now'}
])
console.log(route);
</script>

<style lang="scss" scoped>
</style>